<script setup lang="ts">
//树洞列表
import {getHole} from "@/http/tree/treeHole";
import {ref} from "vue";
import {useRouter} from "vue-router";
import router from "@/router";
// import router from "@/router";

let holeList = ref<any[]>([])
getHole({pageNum: 1, pageSize: 10}).then(res => {
    if (res.code === 200) {
        holeList.value = res.rows
        console.log(holeList.value)
    }else if (res.code==401){
        router.push('/denglu')
    }
    // else (res.code == 401)
    // {
    //
    // }
    console.log(res)

})
////跳转到树洞详情页面传参
const detailId = useRouter()

function jumpDetail(item) {
    detailId.push({
        path: '/detailHole',
        query: {id: item.id}
    })
}


</script>

<template>
    <div class="whole">
        <div class="each" v-for="item in holeList" :key="item.id" @click="jumpDetail(item)">
            <div class="content">
                {{ item.content }}
            </div>
            <div class="time">
                <div>{{ item.createTime }}</div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="less">
.whole {
  width: 94%;
  margin: 5vh auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .each {
    padding: 3vh 8px;
    width: 44%;
    height: 18vh;
    background-color: #ece2f8;
    border-radius: 10px;
    margin-bottom: 20px;

    .content {
      margin-bottom: 3vh;
      //实现多行省略号
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
    }

    .time {
      margin: 10px 0;
    }
  }
}
</style>